<template>
  <!-- 佣金提现 -->
  <view class="request-witchdrawal-content">
    <view class="witchdrawal-content">

      <view class="witchdrawal-item1">
        <text class="input-value-hint">提现金额</text>
        <view class="input-value-content">
          <text class="input-value-symbol">￥</text>
          <uni-easyinput v-model="inputValue" type="digit" :inputBorder="false" :clearable="false" />
        </view>
      </view>

      <view class="witchdrawal-item2">
        <view class="item2-01">
          <text>可提现佣金￥{{"0.00"}}</text>
          <text class="item2-margin-left i-01-color">全部提现</text>
        </view>

        <view class="item2-02">
          <text>额外扣除0.97税费</text>
          <text class="item2-margin-left i-02-color">费率({{"4.0%"}})</text>
        </view>

        <view class="item2-03">
          <text>手续费 {{"0.5"}}元</text>
          <text class="item2-margin-left i-03-color">提现金额≤200元时收取</text>
        </view>


      </view>

      <view class="witchdrawal-bottom">

        <text class="witchdrawal-bt">立即提现</text>
        <text class="witchdrawal-value-hint">提示：必须满3.00元才可以提现</text>
      </view>

    </view>

  </view>

</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { onReady, onLoad } from '@dcloudio/uni-app';

  onLoad(() => {

  })
  onReady(() => {
    console.log('onReady--')

  })


  const inputValue = ref("0")
</script>

<style lang="scss">
  .request-witchdrawal-content {
    width: 100%;
    height: 100%;
    padding: 20rpx;
    box-sizing: border-box;
  }


  .witchdrawal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 20rpx;
    padding: 20rpx 30rpx;
    background: $color-white;
    box-sizing: border-box;

    .witchdrawal-item1 {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      height: 140rpx;
      border-bottom: 1rpx solid #cfcfcf;

      .input-value-hint {
        font-size: 35rpx;
        font-weight: 700;
      }

      .input-value-content {
        display: inline-flex;
        align-items: baseline;
        width: 100%;
        // background: green;

        .input-value-symbol {
          font-size: 40rpx;
          font-weight: 700;

        }


      }
    }


    .witchdrawal-item2 {
      display: flex;
      flex-direction: column;
      width: 100%;
      font-size: 26rpx;

      .item2-01 {
        padding: 20rpx 0;

        .i-01-color {
          color: blue;
        }
      }

      .item2-02 {
        padding: 2rpx 0;

        .i-02-color {
          color: red;
        }
      }

      .item2-03 {
        padding: 2rpx 0;

        .i-03-color {
          color: darkgray;
        }
      }

      .item2-margin-left {
        margin-left: 30rpx;
      }
    }

    .witchdrawal-bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding: 50rpx 0;

      .witchdrawal-bt {
        width: 70%;
        line-height: 100rpx;
        text-align: center;
        border-radius: 50rpx;
        background: #FEEB64;
        font-weight: 700;
        font-size: 40rpx;
      }

      .witchdrawal-value-hint {
        padding: 20rpx 0;
        font-size: 25rpx;
        color: #3D3D3D;
      }
    }

  }
</style>